<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
   <div id="content">
        <p>{{ 1+1}}</p>
        <ul class="list-group">
            
        </ul>
   </div>

    <div id="myp">1</div>
    
    <script src="./base/vue.js"></script>

    <script>

        //https://blog.csdn.net/mrliber/article/details/79036828
        //https://blog.csdn.net/weixin_42695446/article/details/84680213

        //虚拟dom   ===>  js内存对象   内存数据（其实就是真实dm的一层映射结构）


        var data = {
            arr:[]
        }

        //1.内存中创建虚拟dom树
        var vDom = {
            tag:"div",
            attrs:{
                id:"content"
            },
            children:[
               {tag:"p",content:"2"},
               {tag:"ul",attrs:{className:"list-group"}} 
            ]
        }

        //2. 将内存中js的虚拟dom树渲染成真实dom
        //3. 需要改变数据
        data.arr.push("<li>1111</li>")
        data.arr.push("<li>2222</li>")
        //4. 将之前的虚拟dom结合新的数据生成新的虚拟dom树
        var vDom = {
            tag:"div",
            attrs:{
                id:"content"
            },
            children:[
               {tag:"p",content:"2"},
               {tag:"ul",attrs:{className:"list-group"},content:[
                   {tag:"li",content:"1111"},
                   {tag:"li",content:"2222"},
               ]} 
            ]
        }
        //5. 将此次生成好的虚拟dom和上一次的虚拟dom树进行一个比对（diff算法）
        //6  会将此次的差异进行重新渲染，界面更新。



       /*  生成一个新的虚拟dom树，与上一次的虚拟dom树结构进行对比，也就是说，当数据变化的时候，我们大量操作的是虚拟dom
        ,而虚拟dom是内存js对象，操作起来性能要高得多，而真实的dom操作，只有在追加的那一刻进行操作，大大提升了我们的
        性能 */









        //尽量的少操作真是dom，就可以提升性能
        //执行10000次  1ms
        // console.time("temp")
        // let myp = document.getElementById("myp")
        // let num = 1;
        // for(var i=0;i<10000;i++){
        //     ++num;//js数据
        // }
        // myp.innerHTML = num;
        // console.timeEnd("temp")


        //执行10000次  40ms左右
        // console.time("temp")
        // let myp = document.getElementById("myp")
        // for(var i=0;i<10000;i++){
        //     let num = myp.innerHTML * 1;
        //     myp.innerHTML = ++num
        // }
        // console.timeEnd("temp")

        
    </script>

</body>
</html>